<!-- 作用域插槽:子组件暴露的数据给父组件使用 -->
<script setup lang="ts">
import { ref } from 'vue'
import MyTable from './components/MyTable.vue'

//定义接口使用泛型约束类型
export interface IList {
  id: number
  name: string
  age: number
}
const list = ref<IList[]>([
  { id: 1, name: '张小花', age: 18 },
  { id: 2, name: '孙大明', age: 19 },
  { id: 3, name: '刘德忠', age: 17 },
])

const list2 = ref<IList[]>([
  { id: 1, name: '赵小云', age: 18 },
  { id: 2, name: '刘蓓蓓', age: 19 },
  { id: 3, name: '姜肖泰', age: 17 },
])

// 基于删除列表数据
const deleteList = (id:number) => {
  console.log(id)
  list.value = list.value.filter((v) => v.id != id)
}

//查看列表数据
const ClickScan=(obj:any)=>{
alert(JSON.stringify(obj))
  
}
</script>

<template>
  <MyTable :data="list">
    <template #default="obj">
      <button @click="deleteList(obj.id)">删除</button>
    </template>
  </MyTable>
  <MyTable :data="list2">
    <template #default="scan">
      <button @click="ClickScan(scan)">查看</button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
</style>
